<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="element.css">
    <link rel="stylesheet" href="label.css">
</head>
<body>


<div id="test" v-if="printModel">
    <h3>打印说明</h3>
    <p>必须使用 谷歌浏览器并确认以下设置是否正确</p>
    <p>在弹出打印页面中 点击更多设置</p>
    <p>在弹出打印页面中 设置 布局 为 纵向</p>
    <p>在弹出打印页面中 设置 纸张尺寸 为 标签打印</p>
    <p>在弹出打印页面中 设置 边距 为 无</p>
    <input type="button" value="打印" @click="print"/>

    <h2>提示</h2>
    <p>如果纸张尺寸没有标签打印设置的话，请根据下面操作进行设置</p>
    <img src="printOperation.gif">
    <p v-if="false">9.5 * 6.5</p>
</div>

<div id="wap">
    <el-dialog v-model="dialogTableVisible" size="full" :show-close="false">
        <!--<div class="divImsunhao">-->
        <!--<div class="barcode2" id="div128"></div>-->
        <!--<p>任务单号<span>RK20170329-01</span></p>-->
        <!--<p>到货日期<span>20170329</span></p>-->
        <!--<p>打印时间<span>2017-3-29 09:51</span></p>-->
        <!--<div class="barcode" id="div129"></div>-->
        <!--</div>-->
        <sh-print
                v-for="printData of printDatas"
                :val2="printData.val2"
                :rwdh="printData.rwdh"
                :dhrq="printData.dhrq"
                :dysj="printData.dysj"
                :val="printData.val"></sh-print>
    </el-dialog>
</div>


</body>
</html>

<script src="jquery.js"></script>
<script src="vue.js"></script>
<script src="element.js"></script>
<script src="echarts.js"></script>

<script>
    (function () {
        if (!exports) var exports = window;
        var BARS = [212222, 222122, 222221, 121223, 121322, 131222, 122213, 122312, 132212, 221213, 221312, 231212, 112232, 122132, 122231, 113222, 123122, 123221, 223211, 221132, 221231, 213212, 223112, 312131, 311222, 321122, 321221, 312212, 322112, 322211, 212123, 212321, 232121, 111323, 131123, 131321, 112313, 132113, 132311, 211313, 231113, 231311, 112133, 112331, 132131, 113123, 113321, 133121, 313121, 211331, 231131, 213113, 213311, 213131, 311123, 311321, 331121, 312113, 312311, 332111, 314111, 221411, 431111, 111224, 111422, 121124, 121421, 141122, 141221, 112214, 112412, 122114, 122411, 142112, 142211, 241211, 221114, 413111, 241112, 134111, 111242, 121142, 121241, 114212, 124112, 124211, 411212, 421112, 421211, 212141, 214121, 412121, 111143, 111341, 131141, 114113, 114311, 411113, 411311, 113141, 114131, 311141, 411131, 211412, 211214, 211232, 23311120]
            , START_BASE = 38
            , STOP = 106;

        function code128(code, barcodeType) {
            if (arguments.length < 2)
                barcodeType = code128Detect(code);
            if (barcodeType == 'C' && code.length % 2 == 1)
                code = '0' + code;
            var a = parseBarcode(code, barcodeType);
            return bar2html(a.join('')) + '<label>' + code + '</label>';
        }

        function bar2html(s) {
            for (var pos = 0, sb = []; pos < s.length; pos += 2) {
                sb.push('<div class="bar' + s.charAt(pos) + ' space' + s.charAt(pos + 1) + '"></div>');
            }
            return sb.join('');
        }

        function code128Detect(code) {
            if (/^[0-9]+$/.test(code)) return 'C';
            if (/[a-z]/.test(code)) return 'B';
            return 'A';
        }

        function parseBarcode(barcode, barcodeType) {
            var bars = [];
            bars.add = function (nr) {
                var nrCode = BARS[nr];
                this.check = this.length == 0 ? nr : this.check + nr * this.length;
                this.push(nrCode || ("UNDEFINED: " + nr + "->" + nrCode));
            };
            bars.add(START_BASE + barcodeType.charCodeAt(0));
            for (var i = 0; i < barcode.length; i++) {
                var code = barcodeType == 'C' ? +barcode.substr(i++, 2) : barcode.charCodeAt(i);
                converted = fromType[barcodeType](code);
                if (isNaN(converted) || converted < 0 || converted > 106) throw new Error("Unrecognized character (" + code + ") at position " + i + " in code '" + barcode + "'.");
                bars.add(converted);
            }
            bars.push(BARS[bars.check % 103], BARS[STOP]);
            return bars;
        }

        var fromType = {
            A: function (charCode) {
                if (charCode >= 0 && charCode < 32) return charCode + 64;
                if (charCode >= 32 && charCode < 96) return charCode - 32;
                return charCode;
            },
            B: function (charCode) {
                if (charCode >= 32 && charCode < 128) return charCode - 32;
                return charCode;
            },
            C: function (charCode) {
                return charCode;
            }
        };

        //--| Export
        exports.code128 = code128;
    })();
    /*
     showDiv：代表需要显示的divID，
     textVlaue ： 代表需要生成的值，
     barcodeType：代表生成类型(A、B、C)三种类型
     */
//    function createBarcode(showDiv, textValue, barcodeType) {
//        var divElement = document.getElementById(showDiv);
//        divElement.innerHTML = code128(textValue, barcodeType);
//    }
//    createBarcode('div128', 'S0001295946', 'B');
//    //    createBarcode('div129', 'S0001295946', 'B');
//    createBarcode('div129', '20170329', 'B');
    Vue.component('sh-print', {
        render: function (h) {
            var value2 = this.val2;
            var value = this.val;
            var rwdh = this.rwdh;
            var dhrq = this.dhrq;
            var dysj = this.dysj;
            return h(
                'div', {
                    'class': {
                        divImsunhao: true
                    }
                },
                [
                    h('div', {
                        'class': {
                            barcode2: true
                        },
                        domProps: {
                            innerHTML: code128(value2, "B")
                        }
                    }, ''),
                    h('p', ['任务单号',h('span', rwdh)]),
                    h('p', ['到货日期',h('span', dhrq)]),
                    h('p', ['打印时间',h('span', dysj)]),
                    h('div', {
                        'class': {
                            barcode: true
                        },
                        domProps: {
                            innerHTML: code128(value, "B")
                        }
                    }, '')
                ]
            )
        },
        props: {
            val2: '',
            val: '',
            rwdh: '',
            dhrq: '',
            dysj: ''

        }
    });
    var wap = new Vue({
        el: '#wap',
        data: function () {
            return {
                printDatas:[{"val2":"24843996623","val":"20170329","rwdh":"RK20170329-0","dhrq":"20170329","dysj":"03-31 14:48"},{"val2":"39744746173","val":"20170329","rwdh":"RK20170329-1","dhrq":"20170329","dysj":"03-31 14:48"},{"val2":"41468929389","val":"20170329","rwdh":"RK20170329-2","dhrq":"20170329","dysj":"03-31 14:48"},{"val2":"48476164511","val":"20170329","rwdh":"RK20170329-3","dhrq":"20170329","dysj":"03-31 14:48"},{"val2":"26279776198","val":"20170329","rwdh":"RK20170329-4","dhrq":"20170329","dysj":"03-31 14:48"},{"val2":"96585645314","val":"20170329","rwdh":"RK20170329-5","dhrq":"20170329","dysj":"03-31 14:48"},{"val2":"91834372672","val":"20170329","rwdh":"RK20170329-6","dhrq":"20170329","dysj":"03-31 14:48"},{"val2":"74515554251","val":"20170329","rwdh":"RK20170329-7","dhrq":"20170329","dysj":"03-31 14:48"},{"val2":"88647644473","val":"20170329","rwdh":"RK20170329-8","dhrq":"20170329","dysj":"03-31 14:48"},{"val2":"56262285581","val":"20170329","rwdh":"RK20170329-9","dhrq":"20170329","dysj":"03-31 14:48"},{"val2":"63461829968","val":"20170329","rwdh":"RK20170329-10","dhrq":"20170329","dysj":"03-31 14:48"},{"val2":"77494286873","val":"20170329","rwdh":"RK20170329-11","dhrq":"20170329","dysj":"03-31 14:48"},{"val2":"92292475616","val":"20170329","rwdh":"RK20170329-12","dhrq":"20170329","dysj":"03-31 14:48"},{"val2":"82963297114","val":"20170329","rwdh":"RK20170329-13","dhrq":"20170329","dysj":"03-31 14:48"},{"val2":"74641187289","val":"20170329","rwdh":"RK20170329-14","dhrq":"20170329","dysj":"03-31 14:48"},{"val2":"75372282214","val":"20170329","rwdh":"RK20170329-15","dhrq":"20170329","dysj":"03-31 14:48"},{"val2":"81368797585","val":"20170329","rwdh":"RK20170329-16","dhrq":"20170329","dysj":"03-31 14:48"},{"val2":"87711311574","val":"20170329","rwdh":"RK20170329-17","dhrq":"20170329","dysj":"03-31 14:48"},{"val2":"33958225396","val":"20170329","rwdh":"RK20170329-18","dhrq":"20170329","dysj":"03-31 14:48"},{"val2":"72325756686","val":"20170329","rwdh":"RK20170329-19","dhrq":"20170329","dysj":"03-31 14:48"},{"val2":"75768268365","val":"20170329","rwdh":"RK20170329-20","dhrq":"20170329","dysj":"03-31 14:48"},{"val2":"92745712747","val":"20170329","rwdh":"RK20170329-21","dhrq":"20170329","dysj":"03-31 14:48"},{"val2":"75159818174","val":"20170329","rwdh":"RK20170329-22","dhrq":"20170329","dysj":"03-31 14:48"},{"val2":"38837437165","val":"20170329","rwdh":"RK20170329-23","dhrq":"20170329","dysj":"03-31 14:48"},{"val2":"11688285684","val":"20170329","rwdh":"RK20170329-24","dhrq":"20170329","dysj":"03-31 14:48"},{"val2":"29493782977","val":"20170329","rwdh":"RK20170329-25","dhrq":"20170329","dysj":"03-31 14:48"},{"val2":"95465937322","val":"20170329","rwdh":"RK20170329-26","dhrq":"20170329","dysj":"03-31 14:48"},{"val2":"75437653561","val":"20170329","rwdh":"RK20170329-27","dhrq":"20170329","dysj":"03-31 14:48"},{"val2":"58921462743","val":"20170329","rwdh":"RK20170329-28","dhrq":"20170329","dysj":"03-31 14:48"},{"val2":"14585745396","val":"20170329","rwdh":"RK20170329-29","dhrq":"20170329","dysj":"03-31 14:48"},{"val2":"83197982156","val":"20170329","rwdh":"RK20170329-30","dhrq":"20170329","dysj":"03-31 14:48"},{"val2":"55146663257","val":"20170329","rwdh":"RK20170329-31","dhrq":"20170329","dysj":"03-31 14:48"},{"val2":"22416481663","val":"20170329","rwdh":"RK20170329-32","dhrq":"20170329","dysj":"03-31 14:48"},{"val2":"24683619243","val":"20170329","rwdh":"RK20170329-33","dhrq":"20170329","dysj":"03-31 14:48"},{"val2":"15739654218","val":"20170329","rwdh":"RK20170329-34","dhrq":"20170329","dysj":"03-31 14:48"},{"val2":"53244436367","val":"20170329","rwdh":"RK20170329-35","dhrq":"20170329","dysj":"03-31 14:48"},{"val2":"24743799961","val":"20170329","rwdh":"RK20170329-36","dhrq":"20170329","dysj":"03-31 14:48"},{"val2":"52817362783","val":"20170329","rwdh":"RK20170329-37","dhrq":"20170329","dysj":"03-31 14:48"},{"val2":"29659854426","val":"20170329","rwdh":"RK20170329-38","dhrq":"20170329","dysj":"03-31 14:48"},{"val2":"89812915436","val":"20170329","rwdh":"RK20170329-39","dhrq":"20170329","dysj":"03-31 14:48"},{"val2":"66265593413","val":"20170329","rwdh":"RK20170329-40","dhrq":"20170329","dysj":"03-31 14:48"},{"val2":"78151219129","val":"20170329","rwdh":"RK20170329-41","dhrq":"20170329","dysj":"03-31 14:48"},{"val2":"78137428234","val":"20170329","rwdh":"RK20170329-42","dhrq":"20170329","dysj":"03-31 14:48"},{"val2":"18772461766","val":"20170329","rwdh":"RK20170329-43","dhrq":"20170329","dysj":"03-31 14:48"},{"val2":"81986452344","val":"20170329","rwdh":"RK20170329-44","dhrq":"20170329","dysj":"03-31 14:48"},{"val2":"67834966954","val":"20170329","rwdh":"RK20170329-45","dhrq":"20170329","dysj":"03-31 14:48"},{"val2":"72792945849","val":"20170329","rwdh":"RK20170329-46","dhrq":"20170329","dysj":"03-31 14:48"},{"val2":"44232985638","val":"20170329","rwdh":"RK20170329-47","dhrq":"20170329","dysj":"03-31 14:48"},{"val2":"52832145619","val":"20170329","rwdh":"RK20170329-48","dhrq":"20170329","dysj":"03-31 14:48"},{"val2":"74122835632","val":"20170329","rwdh":"RK20170329-49","dhrq":"20170329","dysj":"03-31 14:48"},{"val2":"95737895734","val":"20170329","rwdh":"RK20170329-50","dhrq":"20170329","dysj":"03-31 14:48"},{"val2":"21163319753","val":"20170329","rwdh":"RK20170329-51","dhrq":"20170329","dysj":"03-31 14:48"},{"val2":"43871174159","val":"20170329","rwdh":"RK20170329-52","dhrq":"20170329","dysj":"03-31 14:48"},{"val2":"81937753972","val":"20170329","rwdh":"RK20170329-53","dhrq":"20170329","dysj":"03-31 14:48"},{"val2":"27255725757","val":"20170329","rwdh":"RK20170329-54","dhrq":"20170329","dysj":"03-31 14:48"}],
//                dialogTableVisible: true
                dialogTableVisible: false
            }
        },
        methods: {
            print: function (obj) {
                this.dialogTableVisible = true;
                var _this = this;
                setTimeout(function () {
                    window.print();
                    obj.printModel = true;
                    _this.dialogTableVisible = false;
                }, 500);
            }
        }
    });
    var test = new Vue({
        el: '#test',
        data: function () {
            return {
                printModel: true
            }
        },
        methods: {
            print: function () {
                this.printModel = false;
                wap.print(this);
            }
        }
    });

    function createTestJson(number) {
        var json=[];
        for(var i=0;i<number;i++){
            json.push({
                val2: ''
                +parseInt(Math.random()*9 + 1,10)
                +parseInt(Math.random()*9 + 1,10)
                +parseInt(Math.random()*9 + 1,10)
                +parseInt(Math.random()*9 + 1,10)
                +parseInt(Math.random()*9 + 1,10)
                +parseInt(Math.random()*9 + 1,10)
                +parseInt(Math.random()*9 + 1,10)
                +parseInt(Math.random()*9 + 1,10)
                +parseInt(Math.random()*9 + 1,10)
                +parseInt(Math.random()*9 + 1,10)
                +parseInt(Math.random()*9 + 1,10),
                val: '20170329',
                rwdh: 'RK20170329-'+i,
                dhrq: '20170329',
                dysj: changeDate(new Date())
            })
        }
        console.log(JSON.stringify(json));
        return json;
    }
    function changeDate(date) {
        return dateFormat(new Date(date), 'MM-dd hh:mm');
    }
    function dateFormat(date, fmt) {
        var o = {
            "M+": date.getMonth() + 1,                 //月份
            "d+": date.getDate(),                    //日
            "h+": date.getHours(),                   //小时
            "m+": date.getMinutes(),                 //分
            "s+": date.getSeconds(),                 //秒
            "q+": Math.floor((date.getMonth() + 3) / 3), //季度
            "S": date.getMilliseconds()             //毫秒
        };
        if (/(y+)/.test(fmt))
            fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt))
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    }
</script>
